<!--  -->
<template>
    <div class="leftTopModule">
      <header class="head">
          <titleModule :title="state.titleName"></titleModule>
      </header>
      <section class="main" id="main"></section>
    </div>
  </template>
  
  <script setup>
  import { reactive } from 'vue'
  import titleModule from '../../components/title/index.vue'
  import { Bar } from '@antv/g2plot'
import { Line } from 'three'
  const state = reactive({
      titleName:'各区GDP'
  })
  //创建折线图
  const createLine = () => {
    //1.创建数据源
    const data = [
       { year:'1991',value:3 },
       { year:'1992',value:4 },
       { year:'1993',value:5 },
       { year:'1994',value:6 },
       { year:'1995',value:7 },
       { year:'1996',value:8 },
       { year:'1997',value:9 },
       { year:'1998',value:10 },
       { year:'1999',value:11 },
    ]
    //2.创建line对象
    const linePlot = new Line('main',{
        data,
        xField:'year',
        yField:'value'
    })
    //3.渲染
    linePlot.render();
  }
  </script>
  <style  scoped>
  .leftTopModule{
      width: 100%;
      height: 100%;
  }
  .head{
      width: 100%;
      height: 15%;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .main{
    width: 100%;
    height: 85%;
  }
  </style>